<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { useAdminStore } from '@/stores/admin'
import { House, User, Calendar, Lock, Picture } from '@element-plus/icons-vue'
import { UserFilled, Menu } from '@element-plus/icons-vue'

const store = useAdminStore()
//不显示左边菜单栏、头、脚等，url路径有哪些，需要配置
const noMenu = ['/login']
const router = useRouter()
const dataInfo = reactive({
  showMenu: true,
  defaultOpen: ['1', '2'],
  currentPath: '/',
})
//全局前置路由守卫，初始化的时候调用，每次路由切换之前被调用
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else {
    if (!store.getToken || store.getToken == '') {
      next({ path: '/login' })
    } else {
      next()
    }
  }
  dataInfo.showMenu = !noMenu.includes(to.path)
  dataInfo.currentPath = to.path
})
</script>

<template>
  <div class="layout">
    <el-container v-if="dataInfo.showMenu" class="container">
      <el-aside class="aside">
        <div class="head">
          <div>
            <img src="./assets/elderlyhome.png" alt="logo" class="logo-image">
            <div class="logo-text">
              <h1>东软颐养中心管理系统</h1>
              <p>用心呵护·温暖相伴</p>
            </div>
          </div>
        </div>
        <div class="decorative-line" />

        <el-menu
          background-color="#faf7f2"
          text-color="#5d4037"
          active-text-color="#8d6e63"
          :router="true"
          :default-openeds="dataInfo.defaultOpen"
          :default-active="dataInfo.currentPath"
          class="sidebar-menu"
          :unique-opened="false"
          :collapse-transition="false"
        >

          <el-sub-menu index="2" class="menu-item">
            <template #title>
              <div class="menu-title">
                <el-icon><Picture /></el-icon>
                <span>管理员管理模块</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/admin/page" class="menu-item-child">
                <el-icon><Picture /></el-icon>
                <span>管理人员列表</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="3" class="menu-item">
            <template #title>
              <div class="menu-title">
                <el-icon><House /></el-icon>
                <span>客户服务主管</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/bedManagement/page" class="menu-item-child">
                <el-icon><House /></el-icon>
                <span>床位管理</span>
              </el-menu-item>
              <el-menu-item index="/foodInfo/page" class="menu-item-child">
                <el-icon><Menu /></el-icon>
                <span>膳食管理</span>
              </el-menu-item>
              <el-menu-item index="/outEnter/page" class="menu-item-child">
                <el-icon><Menu /></el-icon>
                <span>外出登记</span>
              </el-menu-item>
              <el-menu-item index="/elderInfo/page" class="menu-item-child">
                <el-icon><UserFilled /></el-icon>
                <span>客户管理</span>
              </el-menu-item>
              <el-menu-item index="/phyExam/page">
                <el-icon><Monitor /></el-icon>
                体检记录
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="4" class="menu-item">
            <template #title>
              <div class="menu-title">
                <el-icon><User /></el-icon>
                <span>护工</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/caregiver/page" class="menu-item-child">
                <el-icon><User /></el-icon>
                <span>护工管理</span>
              </el-menu-item>
              <el-menu-item index="/careRecord/page" class="menu-item-child">
                <el-icon><Calendar /></el-icon>
                <span>护工记录</span>
              </el-menu-item>
                <el-menu-item index="/careContent/page" class="menu-item-child">
                <el-icon><List /></el-icon>
                <span>护理任务</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <el-sub-menu index="5" class="menu-item">
            <template #title>
              <div class="menu-title">
                <el-icon><Lock /></el-icon>
                <span>运营经理</span>
              </div>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/employer/page" class="menu-item-child">
                <el-icon><UserFilled /></el-icon>
                <span>员工管理</span>
              </el-menu-item>
              <el-menu-item index="/postInfo/page" class="menu-item-child">
                <el-icon><Lock /></el-icon>
                <span>岗位管理</span>
              </el-menu-item>
              <el-menu-item index="/goodsInfo/page" class="menu-item-child">
                <el-icon><Lock /></el-icon>
                <span>库存管理</span>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>

        <div class="footer-info">
          <p>温馨提示：关爱老人，从每一个细节开始</p>
          <div class="elder-icon">
            <i class="fas fa-heart" style="color: #e91e63;"></i>
          </div>
        </div>
      </el-aside>

      <el-container class="content">
        <Header />
        <div class="main">
          <router-view />
        </div>
        <Footer />
      </el-container>
    </el-container>

    <el-container v-else class="container">
      <div>
        <router-view />
      </div>
    </el-container>
  </div>
</template>

<style scoped>
.layout {
  min-height: 100vh;
  background-color: #f9f7f3;
}

.container {
  height: 100vh;
}

.aside {
  width: 260px !important;
  background: linear-gradient(180deg, #faf7f2 0%, #f0e8e0 100%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.aside:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.head {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  height: 180px;
  background: linear-gradient(135deg, #8d6e63 0%, #795548 100%);
  color: white;
  position: relative;
}

.head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L100,0 L100,10 L0,10 Z' fill='%23faf7f2'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}

.logo-image {
  width: 75px;
  height: 75px;
  margin-left: 50px;
  border-radius: 50%;
  background-color: white;
  padding: 4px; /* 增加内边距，使logo与边框有更舒适的空间 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); /* 增强阴影效果，提升立体感 */
  transition: all 0.3s ease; /* 添加过渡动画 */
  position: relative;
  overflow: hidden; /* 隐藏超出圆形边框的部分 */
}

.logo-image:hover {
  transform: translateY(-3px) scale(1.05); /* 悬停时的微动画效果 */
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); /* 悬停时加深阴影 */
}

.logo-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  background: linear-gradient(45deg, #ff9a9e, #fad0c4); /* 渐变光晕效果 */
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.logo-image:hover::before {
  opacity: 0.5; /* 悬停时显示渐变光晕 */
}

.logo-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover; /* 确保图片完全覆盖圆形区域 */
  transition: transform 0.5s ease; /* 图片变换动画 */
}

.logo-image:hover img {
  transform: scale(1.08); /* 悬停时图片微放大 */
}

.logo-text h1 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 5px;
}

.logo-text p {
  font-size: 12px;
  opacity: 0.9;
}

.decorative-line {
  height: 1px;
  background: linear-gradient(to right, transparent, #d7ccc8, transparent);
  margin: 10px 0;
}

.sidebar-menu {
  border-right: none;
  padding-top: 10px;
}

.sidebar-menu::-webkit-scrollbar {
  width: 5px;
}

.sidebar-menu::-webkit-scrollbar-thumb {
  background-color: #d7ccc8;
  border-radius: 3px;
}

.menu-item {
  transition: all 0.2s ease;
}

.menu-item:hover {
  background-color: rgba(141, 110, 99, 0.1);
}

.menu-title {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #5d4037;
}

.menu-title i {
  margin-right: 12px;
  font-size: 18px;
  color: #8d6e63;
}

.menu-item-child {
  padding-left: 40px !important;
  transition: all 0.2s ease;
}

.menu-item-child:hover {
  background-color: rgba(141, 110, 99, 0.15) !important;
}

.menu-item-child i {
  margin-right: 10px;
  color: #8d6e63;
  width: 20px;
  text-align: center;
}

.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  font-size: 14px !important;
  color: #5d4037 !important;
  border-radius: 0 !important;
}

.el-menu-item.is-active {
  background-color: rgba(141, 110, 99, 0.2) !important;
  color: #8d6e63 !important;
}

.el-menu-item.is-active i {
  color: #8d6e63 !important;
}

.el-sub-menu__title {
  padding: 0 20px !important;
}

.el-sub-menu__icon-arrow {
  right: 20px !important;
  color: #a1887f !important;
}

.el-sub-menu.is-active .el-sub-menu__title {
  background-color: rgba(141, 110, 99, 0.2) !important;
}

.el-sub-menu.is-active .el-sub-menu__icon-arrow {
  color: #8d6e63 !important;
}

.footer-info {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  padding: 0 20px;
  text-align: center;
  font-size: 12px;
  color: #8d6e63;
}

.footer-info .elder-icon {
  margin-top: 5px;
  font-size: 14px;
}

.content {
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  overflow: hidden;
}

.main {
  height: calc(100vh - 100px);
  overflow: auto;
  padding: 20px;
  background-color: white;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .aside {
    width: 240px !important;
  }

  .menu-title {
    font-size: 14px;
  }

  .menu-item-child {
    padding-left: 35px !important;
  }
}

@media (max-width: 768px) {
  .aside {
    width: 220px !important;
  }

  .logo-image {
    width: 50px;
    height: 50px;
  }

  .logo-text h1 {
    font-size: 16px;
  }

  .logo-text p {
    font-size: 11px;
  }
}

/* 动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

.aside {
  animation: fadeIn 0.5s ease-out forwards;
}

.menu-item {
  animation: fadeIn 0.5s ease-out forwards;
}

.menu-item:nth-child(1) { animation-delay: 0.1s; }
.menu-item:nth-child(2) { animation-delay: 0.2s; }
.menu-item:nth-child(3) { animation-delay: 0.3s; }
.menu-item:nth-child(4) { animation-delay: 0.4s; }
</style>